<template>
  <div class="footerNav">
    <!-- 随笔 -->
    <div class="item" @click="go('/essays')">
      <IComment :size="isPC ? 30 : 25" color="var(--iconColor)" />
      <div class="text">随笔</div>
    </div>
    <!-- 首页 -->
    <div class="item" @click="go('/')">
      <IHome :size="isPC ? 30 : 25" color="var(--iconColor)" />
      <div class="text">首页</div>
    </div>
    <!-- 关于 -->
    <div class="item" @click="go('/about')">
      <IUser :size="isPC ? 30 : 25" color="var(--iconColor)" />
      <div class="text">关于</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { IUser, IHome, IComment } from "@cop/Icons"
import { isPC } from "@/hooks/resize"
const router = useRouter()
const go = path => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.footerNav {
  z-index: 97;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--rootPcWith);
  height: 50px;
  backdrop-filter: blur(5px) saturate(150%) brightness(1.1);
  color: var(--TextColor);
  background: var(--blogItemTitleBg);
  transition: all 0.3s var(--n-bezier);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
  border-top-left-radius: var(--blogItemRadius);
  border-top-right-radius: var(--blogItemRadius);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  .item {
    display: block;
    i {
      transition: all 0.3s var(--n-bezier);
    }
    .text {
      font-weight: bold;
      color: var(--TextColor);
      transition: var(--basic-transition);
    }
  }
}
</style>
